<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="vendor/animate.min.css" />
		<link rel="stylesheet" href="css/core.css" />
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html">Home</a></li>
								<li class="pages">
									<a href="pages.html">pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html">landscape</a></li>
										<li><a href="gallery.html">gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html"  class="current">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>

		<section class="blog">
            <div class="blog-container clearfix">
                <header class="Blog-header">
                    <h1 class="blog-title">Read Our Blog</h1>
                    <div class="Blog-header-search" id="adjustSearch">
                        <form action="" method="post">
                            <input type="text" placeholder="Search the Mews..." class="search-input"/>
                            <input type="submit" id="blogSearch" value=" "/>
                        </form>
                    </div>
                    <p class="Blog-header-word">Lorem ipsum dolor sit ament,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.</p> 
                </header>
                <div class="blog-video-box">
                	<div class="blog-video-box-bg">
                		<h1>Video Post Frormat</h1>
                		<p>Processus dynamicius,qui sequitur mutationem consuetudium lectorum.</p>
                		<div class="video-play" id="videoPlay"></div>
                		<div class="bg-bottom">
                			<span id="blogBgBottomNext" class="blog-next"></span>
                			<p>Blog/Video Presentation</p>
                		</div>
                	</div>
                	<video id="video" width="100%" height="100%" poster="img/hf-blog-bg.gif">
						<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/ogg" />
						<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/mp4" /> 
						
					</video>
                </div>
                <div class="blog-post clearfix">
                	<div class="blog-post-left">
                		<div class="blog-post-left-title">
                			<h1 class="blog-title">Single Image Post</h1>
                			<p>clarititas est etiam processus dynamicus mutationem lectorum.</p>
                		</div>
                		<img src="img/hf-blog0.png" style="width: 340px;height: 350px;"/>
                		<div class="post-left-bottom">
	                		<span class="blog-next"></span>
	                		<p>Blog/Imane Post</p>
	                	</div>
                	</div>
                	<div class="blog-post-right">
                		<div class="post-right-top">
                			<i class="blog-point-two"></i>
                			<h2 class="blog-post-word">Claritas est etiam processus dynamicus,qui sequitur mutationem consuetudium.</h2>
                			<p>-Frank Aams</p>
                			<div class="box-bottom">
	                			<span class="blog-next"></span>
	                			<span class="blog-page">Blog/Quote</span>
	                		</div>
                		</div>
                		<div class="post-right-bottom clearfix">
                			<div class="post-right-bottom-left">
                				<h1 class="blog-title">Standard Post</h1>
                				<p>Lorem ipsum dolor sirt amet,con-sectetuer adipiscing elit.sed diam nonummy nibh euismod tincidunt ut laoreet dolor magna.</p>
                				<div class="box-bottom">
		                			<span class="blog-next"></span>
		                			<span class="blog-page">Blog/Article</span>
		                		</div>
                			</div>
                			<div class="post-right-bottom-right">
                				
                			</div>
                		</div>
                	</div>
                </div>
                <div class="blog-pics">
                	<div class="blog-pics-box">
                		<div class="blog-pics-item" style="font-size: 0;">
                			<img src="img/hf-blog-pics0.jpg" style="width: 1250px;max-height: 600px;"/>
                			<img src="img/hf-blog-pics1.jpg" style="width: 1250px;max-height: 600px; display: none;"/>
                			<img src="img/hf-blog-pics2.jpg" style="width: 1250px;max-height: 600px; display: none;"/>
                			<img src="img/hf-blog-pics3.jpg" style="width: 1250px;max-height: 600px; display: none;"/>
                			<img src="img/hf-blog-pics4.jpg" style="width: 1250px;max-height: 600px; display: none;"/>
                		</div>
                	</div>
                	<div class="pics-spot">
                		<div class="picsSpot selectPicsSpot" id="spot0"></div>
                		<div class="picsSpot" id="spot1"></div>
                		<div class="picsSpot" id="spot2"></div>
                		<div class="picsSpot" id="spot3"></div>
                		<div class="picsSpot" id="spot4"></div>
                	</div>
                	<span class="blog-next" id="blogPicsNext"></span>
                </div>
                <div class="blog-post clearfix">
                	<div class="blog-post-right">
                		<div class="post-right-top post-top-adjustColor">
                			<i class="blog-point-two"></i>
                			<h2 class="blog-post-word"><strong>Globals</strong> -Claritas est etiam processus dynamicus,qui sequitur mutationem consuetudium.</h2>
                			<p>-Frank Aams</p>
                			<div class="box-bottom">
	                			<span class="blog-next"></span>
	                			<span class="blog-page">Blog/Quote</span>
	                		</div>
                		</div>
                		<div class="post-right-bottom clearfix">
                			<div class="post-right-bottom-left">
                				<h1 class="blog-title">Post With Audio Player</h1>
                				<p>Lorem ipsum dolor sirt amet,con-sectetuer adipiscing elit.sed diam nonummy nibh euismod tincidunt ut laoreet dolor magna.</p>
                				<div class="box-bottom">
		                			<span class="blog-next"></span>
		                			<span class="blog-page">Blog/Article</span>
		                		</div>
                			</div>
                			<div class="post-right-bottom-right">
                				<i style="color: #fff;text-align: center;">The Saltwater Room</i>
                				<div id="playBtn">
                					<i class="play-btn1"></i>
                					<i class="play-btn2"></i>
                				</div>
                				<i class="play-bar"></i>
                				<audio id="music" >
                					<source src="vendor/Owl City、Breanne Düren - The Saltwater Room - 单曲版.mp3" type="video/ogg" />
                				</audio>
                			</div>
                		</div>
                	</div>
                	<div class="blog-post-left poat-right-adjustColor">
                		<div class="blog-post-left-title">
                			<h1 class="blog-title">Single Image Post</h1>
                			<p>clarititas est etiam processus dynamicus mutationem lectorum.</p>
                			<p>processus dynamicus mutationem lectorum.</p>
                		</div>
                		<img src="img/hf-blog1.png" class="blog1-image" style="height: 300px;"/>
                		<div class="post-left-bottom">
	                		<span class="blog-next"></span>
	                		<p>Blog/Imane Post</p>
	                	</div>
                	</div>
                </div>
                
                <footer>
                	<div class="blog-btn">Load More</div>
                </footer>
            </div>
        </section>

		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>
					
					<ul class="center-menu">
						<li><img src="img/footer1.png"/></li>
						<li><img src="img/footer9.png"/></li>
						<li><img src="img/footer5.png"/></li>
						<li><img src="img/footer2.png"/></li>
						<li><img src="img/footer8.png"/></li>
						<li><img src="img/footer4.png"/></li>
						<li><img src="img/footer3.png"/></li>
						<li><img src="img/footer6.png"/></li>
					</ul>
				</div>
			</div>
			
			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png"/>
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>
						
						<div class="left-inner-bottom">
							<img src="img/footer7.png"/>
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>
					
					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px"/></li>
						</ul>
					</div>
					
					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img"/>
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
		<script type="text/javascript" src="vendor/jquery-2.1.0.js" ></script>
		<script src="js/core.js"></script>
	</body>

</html>